<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>账务系统-注册</title>
<link href="css/style_login.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
<script src="js/cloud.js" type="text/javascript"></script>
<style>
	#right {
    width: 75%;
    height: 650px;
    background: #9e9e9e1f;
}


#main_pic {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 40%;
    left: 15%;
    border-radius: 40%;
}
#mian_font {
    font-size: 30px;
    color: #aaa;
    position: absolute;
    top: 30%;
    left: 5%;
}
#middle{
    width: 100%;
    height: 500px;
    display: flex;
}
#form {
    width: 650px;

    height: 500px;
    position: absolute;
    top: 20%;
    left: 45%;
}
#form_top {
    width: 100%;
    height: 74px;
    position: absolute;
}

    #top_font {
    font-size: 27px;
    color: #645353;
    margin-top: 18px;
    margin-left: 20px;
}
.input1 {
    margin-top: 63px;
    margin-left: 40px;
   
    width: 350px;
    height: 36px;
}
.input2 {
    margin-top: 10px;
    margin-left: 40px;
   
    width: 350px;
    height: 36px;
}
.input3 {
    margin-top: 10px;
    margin-left: 40px;
  
    width: 350px;
    height: 36px;
}
.input4 {
    margin-top: 10px;
    margin-left: 40px;
   
    width: 350px;
    height: 36px;
}
.input5 {
    margin-top: 10px;
    margin-left: 40px;
    
    width: 350px;
    height: 36px;
}
.input6 {
    margin-top: 10px;
    margin-left: 40px;
   
    width: 350px;
    height: 36px;
}

#header_pic{
    margin-top: 15px;
    margin-left: 40px;
}

#head_img {
    border: 1px solid #aaa;
    width: 94px;
    position: absolute;
    height: 73px;
    top: 255px;
    left: 330px;
}
.from_font {
   
    width: 88px;
    height: 30px;
    display: inline-flex;
    margin: 8px;
    font-size: 21px;
}
.but {
    width: 300px;
    margin-left: 77px;
    height: 34px;
    margin-top: 32px;
    background: #eff;
    border: 1px solid #5f53532e;
    font-size: 22px;
}
font1 {
    position: relative;
    left: 29px;
}
font2 {
    position: relative;
    left: 41px;
}
font3 {
    position: relative;
    left: 29px;
}
font4 {
    position: relative;
  left: 16px;
}
font5 {
    position: relative;
    left: 41px;
}
font6 {
    position: relative;
    left: 41px;
}
.file {
    position: absolute;
    top: 61%;
    left: 26%;
}
.input {
    width: 221px;
    height: 30px;
    margin-top: 2px;
  
    margin-left: 10px;
    position: absolute;
  
}
.sex {
    display: inline;
    margin-left: 4px;
}
#uname_msg {
   
    display: inline;
    position: absolute;
    width: 190px;
    height: 24px;
    top: 69px;
    left: 380px;
}

#pwd_msg {
    
    display: inline;
    position: absolute;
    width: 150px;
    height: 24px;
    top: 115px;
    left: 380px;
}
#pho_msg{
	display: inline;
    position: absolute;
    width: 150px;
    height: 24px;
    top: 165px;
    left: 380px;
}
#sid_msg{
    
    display: inline;
    position: absolute;
    width: 150px;
    height: 24px;
    top: 205px;
    left: 380px;
}
#email_msg {
    
    display: inline;
    position: absolute;
    width: 150px;
    height: 24px;
    top: 305px;
    left: 380px;
}
</style>
</head>
<body style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">



    <div id="mainBody">
      <div id="cloud1" class="cloud"></div>
      <div id="cloud2" class="cloud"></div>
    </div>  


<div class="logintop">    
    <span>欢迎注册神州信息账务系统</span>    
    <ul>
    <li><a href="#">回首页</a></li>
    <li><a href="#">帮助</a></li>
    <li><a href="#">关于</a></li>
    </ul>    
    </div>
    
  <div id="right">
		<form action="javascript:register();" id="form" onsubmit="return check();">
			<div id="form_top">
				<div id="top_font">
				用户注册
				</div>
			</div>
			<div id="form_middle">
			  	<div class="input1">
					<div class="from_font"><font1>用户名</font1></div>
					<input type="text" name="username" placeholder="请输入用户名" class="input" id="username">
					<div id="uname_msg"></div>
				</div>
				<div class="input2">
					<div class="from_font"><font2>密码</font2></div>
					<input type="password" name="password" placeholder="请输入密码" class="input" id="password">
					<div id="pwd_msg"></div>
				</div>
				<div class="input3">
					<div class="from_font"><font3>手机号</font3></div>
					<input type="text" name="phone" placeholder="请输入手机号" class="input" id="phone">
					<div id="pho_msg"></div>
				</div>
				<div class="input4">
					<div class="from_font"><font4>身份证号</font4></div>
					<input type="text" name="sid" placeholder="请输入身份证号码" class="input" id="sid">
					<div id="sid_msg"></div>
				</div>
			<div id="sex" class="input5">
				<div class="from_font"><font5>性别</font5></div>
				<div class="sex">
				<input type="radio" name="sex" value="男" class="sex1" checked="check">男
				<input type="radio" name="sex" value="女" class="sex1">女
				</div>
			</div>
			<div class="input6">
				<div class="from_font"><font6>邮箱</font6></div>
				<input type="text" name="sid" class="input" placeholder="请输入合法邮箱" class="input" id="email">
				<div id="email_msg"></div>
			</div>
			<div class="input4">
					<div class="from_font"><font4>家庭地址</font4></div>
					<input type="text" name="sid" placeholder="请输入家庭住址" class="input" id="home">
					<div id="sid_msg"></div>
				</div>
			<input type="submit" value="注   册" class="but"  id="but" >
			</div>
		</form>
		
	</div>
    
    <div class="loginbm">账务系统-交流学习-2018</div>
    <script>

   
    var uname=document.getElementById('username');
    var uname_msg=document.getElementById('uname_msg');
    var pwd_msg=document.getElementById('pwd_msg');
    var email_msg=document.getElementById('email_msg');
    var pwd=document.getElementById('password');
    var phone=document.getElementById('phone');
    var sid_msg=document.getElementById('sid_msg');
    var sid=document.getElementById('sid');
    var email=document.getElementById('email');
    var home=document.getElementById('home');
    var fom=document.querySelector("form");
    var but=document.getElementById('but');
    //uname pwd phone sid sex
    var exc;
    var result;
    var sex=document.getElementsByClassName('sex1');
    	for (var i = 0; i < sex.length; i++) {
    		if(sex[i].checked)
    		{
    			sex = sex[i].value;
    	}
    }
   
    	 function register() {
    	    	$.ajax({  
    		          url:"regist",    
    		          type:"post",  
    		          data:{  
    		        	  "userName" : $("#username").val(),
    		        	  "userPwd" : $("#password").val(),
    		        	  "phoneNum" : $("#phone").val(),
    		        	  "email" : $("#email").val(),
    		        	  "cardNum" : $("#sid").val(),
    		        	  "sex" : sex,
    		        	  "address" : $("#home").val()
    		          },  
    		          success:function(data) {
    		        	  if(data=="success"){  
    		      			location.href="/acct";
    		        	  }else{
    		        		  $(".msg").append("<font style='color:red;font-size:16px'>登录失败</font>");
    				      		$(".msg").css("background-color","#aaa");
    				      		setTimeout(function () {
    				      			location.href="toregit";
    				      	}, 500);   		
    		        	  }
    		          }
    		          
    		        });	
    	       
    	    }
    	function userNameIsExist(userName){
    		$.ajax({  
		          url:"uNameIsExist",    
		          type:"post",  
		          data:{  
		        	  "userName" : userName,
		          },  
		          success:function(data) {
		        	  if(data=="true"){	
		        	    		uname_msg.innerHTML=`<img src='images/dui.png' width="15px" height="15px">`;
		        	    		}else{
		        	    			uname_msg.innerHTML=`<span style='color:red; font-size:9px'>
		        	    	    		用户名已存在</span>
		        	    	    		`;
		        	  }
		          } 
		        });	
    	}
    	

    uname.onchange=function () {
    	if(valUname(uname.value)){
    		userNameIsExist(uname.value);
    	}else{
    		
    		uname_msg.innerHTML=`<span style='color:red; font-size:9px'>
    		
    		用户名必须6-15位，全为英文或数字或中文</span>
    		`;
    		
    	}
    }
    pwd.onchange=function () {

    	if(valPwd(pwd.value)){
    		pwd_msg.innerHTML=`<img src='images/dui.png' width="15px" height="15px">`;
    	}else{
    		
    		pwd_msg.innerHTML=`<span style='color:red; font-size:9px'>
    		
    		密码必须5-15位，英文大写开头</span>
    		`;
    		
    	}
    }
    phone.onchange=function () {

    	if(valPhone(phone.value)){
    		pho_msg.innerHTML=`<img src='images/dui.png' width="15px" height="15px">`;
    	}else{
    		
    		pho_msg.innerHTML=`<span style='color:red; font-size:9px'>
    		
    		手机号格式不正确</span>
    		`;
    		
    	}
    }
    sid.onchange=function () {

    	if(valSid(sid.value)){
    		sid_msg.innerHTML=`<img src='images/dui.png' width="15px" height="15px">`;
    	}else{
    		
    		sid_msg.innerHTML=`<span style='color:red; font-size:9px'>
    		
    		请检查身份证号是否填对</span>
    		`;
    		
    	}
    }
    email.onchange=function () {

    	if(valEmail(email.value)){
    		email_msg.innerHTML=`<img src='images/dui.png' width="15px" height="15px">`;
    	}else{
    		
    		email_msg.innerHTML=`<span style='color:red; font-size:9px'>
    		
    		请检查邮箱是否填对</span>
    		`;
    		
    	}
    }
    function valUname(uname) {
    	exc=/^[a-zA-Z0-9_\u4e00-\u9fa5]{5,13}[a-zA-Z0-9_\u4e00-\u9fa5]$/;
    	if (exc.test(uname))
    		return true;
    	else
    		return false;
    }
    function valPwd(pwd) {
    	exc=/^[A-Z][a-zA-Z0-9_]{4,13}[a-zA-Z0-9_]$/;
    	if (exc.test(pwd))
    		return true;
    	else
    		return false;
    }
    function valPhone(pho) {
    	
    	exc=/^[1][3,5,6,7,8]\d{9}$/;
    	if (exc.test(pho))
    		return true;
    	else
    		return false;
    }
    function valSid(sid) {
    	
    	exc=/^[1-9]\d{16}[\d|x]$/;
    	if (exc.test(sid))
    		return true;
    	else
    		return false;
    }
 function valEmail(email) {
    	
    		exc=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    		//exc=/^[1][3,5,6,7,8]\d{9}$/;
        	if (exc.test(email))
        		return true;
        	else
        		return false;
    }
    function check() {
    	

    //uname pwd phone sid v &&valPwd(pwd)&&valSid(sid)
    if (valUname(uname.value)&&valPwd(pwd.value)&&valSid(sid.value)&&valPhone(phone.value)&&valEmail(email.value)) {
    		return true;
    	}
    else{
    alert("请检查是否完全输入正确");
    return false;
    }

    }
   
    </script>
</body>
</html>